<template>
  <div class="play">
      <audio controls autoplay 
        @timeupdate="timeUpdate" 
        :src="`https://music.163.com/song/media/outer/url?id=${music.id}.mp3`"
        ref="player"
        @ended="ended"
      >
      </audio>
      <!-- 自定义音乐播放器的一些操作 播放暂停动画歌词 进度条，播放列表 上一曲下一曲 -->
      <div class="miniplayer">
          <!-- 用animation-play-state来切换动画是否执行或暂停 -->
          <img @click="showFull" :style="{animationPlayState:playstate?'running':'paused'}" 
            :src="music.picUrl||music.al.picUrl"
          />
          <div @click="showFull" :style="{animationPlayState:playstate?'running':'paused'}" class="name">{{music.name}}</div>

          <div class="button" @click="changePlayState">
            <canvas width="60" ref="playbtn" height="60"></canvas>
            <!--  fa-pause-pause-o play 如果时播放状态显示暂停图标 否则显示播放图标-->
            <i :class="['fa',playstate?'fa-pause':'fa-play']" :style="{marginLeft:playstate?'0px':'3px'}"></i>
          </div>
      </div>
      <transition 
      enter-active-class="animate__animated animate__slideInUp" 
      leave-active-class="animate__animated animate__slideOutDown">
      <div v-if="fullscreen" class="fullscreen">
        <div class="bg bg1" style="background-color:rgba(0,0,0,0.5);filter:none"></div>
        <div class="bg bg2" :style="{backgroundImage:`url(${music.picUrl || music.al.picUrl})`}"></div>
        <full-sceen 
          :music="music"
          @hidefull="fullscreen=$event"
          :playstate="playstate"
          :currentTime="currentTime"
          :totalTime="totalTime"
          @changetime="changeTime"
          @playorpaused="changePlayState"
          :playCollect="playCollect"
          @changemusic="$emit('changemusic',$event)"
          @changecircle="changecircle"
          :cirlceMode="cirlceMode"
          @play="$emit('play',$event)"
        ></full-sceen>
      </div>
      </transition>
  </div>
</template>

<script>
import FullSceen from './FullSceen.vue';
export default {
  components: { FullSceen },
  props:{
    music:Object,
    playCollect:Array,
    cirlceMode:String
  },
  data(){
    return {
      playbtn:null,
      playstate:true,
      fullscreen:false,
      currentTime:0,
      totalTime:0,
    }
  },
  mounted(){
    this.playbtn=this.$refs.playbtn;
  },
  methods:{
    timeUpdate(event){
      let currentTime=event.target.currentTime;
      this.currentTime=currentTime;//当前播放的时间.
      let totalTime=event.target.duration;
      this.totalTime=totalTime;
      this.drawCircle(currentTime,totalTime);
    },
    drawCircle(c,t){
       let cxt=this.playbtn.getContext("2d");
        cxt.clearRect(0,0,60,60); //清除画布
        //绘制一个圆形.
        cxt.beginPath();
        cxt.strokeStyle="gray";
        cxt.lineWidth=8;
        cxt.arc(30,30,20,0,2*Math.PI); // 0-2π
        cxt.stroke();
        cxt.closePath();
        //绘制播放的进度
        cxt.beginPath(); 
        cxt.strokeStyle="#555";
        cxt.arc(30,30,20,0,2*Math.PI*(c/t));//当前时间/总时长. * 2π
        cxt.stroke();
        cxt.closePath();
    },
    changePlayState(){//切换播放暂停状态
      this.playstate=!this.playstate;
      let player=this.$refs.player;
      if(this.playstate){
        player.play();//播放
      }else{
        player.pause();//暂停
      }
    },
    showFull(){
      this.fullscreen=true;
    },
    changeTime(ctime){//修改播放时间
      console.log(ctime);
      this.$refs.player.currentTime=ctime;
    },
    ended(){
      console.log("播放结束.");
      this.$emit("changemusic",2);//播放完成后播放下一曲.
      this.$refs.player.currentTime=0;//时间归0
      this.$refs.player.play();//继续播放
    },
    changecircle(event){ //修改循环播放模式 
      this.$emit("changecircle",event);
    }
  },
  watch:{
    music(){
      this.playstate=true;
    }
  }
}
</script>

<style lang="less" scoped>
.play{
  background-color: rgb(7, 6, 6);
  width:100%;
  position: fixed;
  bottom:0px;
  z-index:9;
  audio{
    display: none;
  }
  .miniplayer{
    display: flex;
    overflow: hidden;
    img{
      width:50px;
      display: block;
      border-radius: 50%;
      overflow: hidden;
      padding:5px;
      animation: round 3s linear infinite;
    }
    .name{
      flex:1;
      line-height: 50px;
      padding:0px 20px;
      color:white;
      white-space: nowrap;
      animation: movegun 2s linear infinite;
      overflow: hidden;
    }
    .button{
      background-color: rgb(7, 6, 6);
      width:60px;
      position: relative;
      i{
        &.fa{
          position: absolute;
          color:white;
          left:50%;
          top:50%;
          font-size:20px;
          transform: translate(-50%,-50%);
          margin-left:2px;
        }
      }
    }
  }
  .fullscreen{
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    overflow: hidden;
    z-index:11;
    .bg{
        position: fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        overflow: hidden;
        z-index:9;
        background-color:rgba(0, 0, 0, 0.5);
        filter: blur(10px);
    }
    .bg1{
      z-index:9;
      filter: none;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .bg2{
      z-index:8;
      background-size:cover;
    }
  }
}
@keyframes round {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
@keyframes movegun {
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(100%);
  }
}
</style>